<head>
	<style type="text/css">
		section {width: 960px; height: 210px; margin: 50px; border: 1px solid gray;}
	</style>


	<style type="text/css">
		section > div {float: left; }
		
		#user_pic {
			margin: 5px;
		}
		
		#user_info {
			margin: 30px 10px 0 10px;
			width: 550px;
			border: 1px solid black;
		}
		
		#user_info > p {margin: 10px 0 20px 100px; font: normal 18pt Arial, Helvetica, sans-serif; }
		
		#user_info > ul { list-style-type: none;}
		#user_info > ul li { padding: 8px; font: normal 16pt sans-serif;}
		#user_info > ul li > a { font: bold 14pt sans-serif; margin: 0 20px 0 0; }
		
	</style>
</head>

<!-- ######################################################################### -->

<section>
	<div id='user_pic'><img src='../../static/img/user_pic.png' /></div>
	<div id='user_info'>
	    <p>Yuriy Shapovalov</p>
	    <ul>
	        <li><a href='/points'>Points:</a>247.31 (+21.3)</li>
	        <li><a href='/rank'>Rank:</a>17 (+4)</li>
	    </ul>
	</div>
</section>